import React, { useEffect, useState } from 'react';
import * as echarts from 'echarts';
import { sale_echarts_xAxis, sale_ehcrts_A, sale_ehcrts_B } from '../../../utils/sale'
import Echartsbar from '../../../component/Echartsbar'
import '../../../style/flowthink.scss'
import TableHeader from '../../../component/TableHeader';
function Flowthink(props) {
    var [xaxis, setXaxis] = useState();
    var [liang, setLiang] = useState();
    var [shu, setShu] = useState()
    useEffect(() => {
        sale_echarts_xAxis().then((res) => {
            setXaxis(res.data)
        })
        sale_ehcrts_A().then((res) => {
            setLiang(res.data)
        })
        sale_ehcrts_B().then((res) => {
            setShu(res.data)
        })
    }, [])
    var legned = ["访问量", "访客数"]
    return (
        <div className='flowthink'>
            <TableHeader header={"营销  /  流量分析"} name={"  流量分析 "}></TableHeader>
            <div className="banner">
                <div className="box" >
                    <p>访问量</p>
                    <p className='num'>136,778</p>
                </div>
                <div className="box">
                    <p>访客数</p>
                    <p className='num'>77</p>
                </div>
                <div className="box">
                    <p>新增访问量</p>
                    <p className='num'>328</p>
                </div>
                <div className="box">
                    <p>新增访客数</p>
                    <p className='num'>125</p>
                </div>
            </div>
            <Echartsbar title={"流量分析"} legned={legned} xAxis={xaxis} numA={liang} numB={shu}></Echartsbar>
        </div>
    );
}

export default Flowthink;